import React from 'react'
import style from './Index.module.less'
import { EllipsisOutlined } from '@ant-design/icons'
import { Dropdown } from 'antd'
import classNames from 'classnames'

function renderMenu (data, setModifyData) {
  return {
    items: [
      {
        label: '修改文件',
        key: 1,
        onClick: (e) => {
          e.domEvent.stopPropagation()
          setModifyData(data)
        }
      }
    ]
  }
}

function Item ({ data, setModifyData, setFile, active }) {
  return (
    <div className={classNames(style['file-item'], { [style.active]: active })} onClick={(e) => setFile(data)}>
      <div className={style['file-title']}>{data.subtype}</div>
      <div className={style['file-info']}>
        <span className={style['file-pages']}>
          {data.pdf_fileid === null ? <span className={style.lack}>缺失</span> : `${data.begin_page}-${data.end_page}`}
        </span>
        <Dropdown menu={renderMenu(data, setModifyData)} trigger={['click']} onClick={(e) => e.stopPropagation()}>
          <span className={style['file-operate']}><EllipsisOutlined /></span>
        </Dropdown>
      </div>
    </div>
  )
}

export default Item
